<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>编辑银行卡</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0F3460',
                        secondary: '#1A508B',
                        neutral: '#F5F8FA',
                        'neutral-dark': '#E9EFF6',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .btn-hover {
                @apply hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200;
            }
        }
    </style>
</head>
<body class="bg-neutral min-h-screen font-inter text-gray-800">
    <div class="container mx-auto px-4 py-8 max-w-md">
        <!-- 页面标题 -->
        <div class="mb-6">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-semibold text-primary flex items-center">
                <i class="fa fa-credit-card mr-2"></i> 编辑银行卡
            </h2>
            <div class="h-1 w-16 bg-primary/30 mt-2 rounded-full"></div>
        </div>

        <!-- 表单卡片 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
            <form method="post" class="space-y-5">
                <!-- 密码输入 -->
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-lock mr-1"></i> 密码：
                    </label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-key"></i>
                        </span>
                        <input type="text" id="password" name="password" value="{{ card.pass }}" 
                               required pattern="\d{6}" 
                               class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg input-focus 
                                      placeholder-gray-400"
                               placeholder="请输入6位数字密码">
                    </div>
                </div>

                <!-- 挂失状态选择 -->
                <div>
                    <label for="is_lost" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-exclamation-triangle mr-1"></i> 挂失状态：
                    </label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 pointer-events-none">
                            <i class="fa fa-info-circle"></i>
                        </span>
                        <select id="is_lost" name="is_lost" 
                                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg input-focus 
                                       appearance-none bg-white">
                            <option value="0" {% if not card.IsReportLoss %}selected{% endif %}>
                                <i class="fa fa-check-circle text-green-500 mr-1"></i> 否
                            </option>
                            <option value="1" {% if card.IsReportLoss %}selected{% endif %}>
                                <i class="fa fa-times-circle text-red-500 mr-1"></i> 是
                            </option>
                        </select>
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
                            <i class="fa fa-chevron-down"></i>
                        </div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <button type="submit" 
                        class="w-full bg-primary hover:bg-secondary text-white font-medium py-2.5 px-4 rounded-lg 
                               flex items-center justify-center btn-hover">
                    <i class="fa fa-save mr-2"></i> 保存修改
                </button>
            </form>
        </div>

        <!-- 返回链接 -->
        <div class="mt-6 text-center">
            <a href="{{ url_for('admin.list_cards') }}" 
               class="inline-flex items-center text-primary hover:text-secondary font-medium transition-colors duration-200">
                <i class="fa fa-arrow-left mr-2"></i> 返回银行卡列表
            </a>
        </div>
    </div>
</body>
</html>